<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<!-- Bootstrap core CSS -->
<link href="/admin/public/bootstrap.min.css" title="" rel="stylesheet" />
<link rel="stylesheet" href="/admin/css/plugins/toastr/toastr.min.css" />
<link href="/admin/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="/admin/public/animate.css" rel="stylesheet">
<link rel="stylesheet" href="/admin/public/inspinia.css" />
<link rel="stylesheet" href="/admin/css/templet_form.css" />
<link rel="stylesheet" type="text/css" href="${request.getContext }/admin/css/xcConfirm.css"/>
<!-- 图片放大缩小 -->
<link href="/admin/css/YLlightbox.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
	<script src="/admin/public/html5shiv.min.js"></script>
	<script src="/admin/public/respond.min.js"></script>
<![endif]-->
<style>
/*
	设置按钮里面字体的颜色
*/
table a {
    color: white !important;
}
/* 
	表格样式水平居中
*/
table tr th{
	text-align:center;
}
table tr td{
	vertical-align: middle !important;
	text-align:center;
}
</style>

<title>会员管理</title>
</head>
<body style="overflow-x:auto;min-width:1750px;">
	<div id="wrapper" class="container">
			<!--标编辑-->
			<div id="biaobj" class=" wrapper wrapper-content animated fadeInRight">
				<h3>电影列表</h3>
				<div class="right_box" id="right_box">
					<form action="/admin/movie/movieList" class="form-horizontal">
						<div class="form-group">
							<label for="" class="col-lg-1 col-md-2 col-sm-2 control-label">电影名称:</label>
							<div class="col-lg-2 col-md-2 col-sm-2">
								<input style="margin-left:-50px;" type="text" name="movieName" id="movieName" value="${movieName }" class="form-control" />
							</div>
							<label for="" class="col-lg-1 col-md-2 col-sm-2 control-label">导演:</label>
							<div class="col-lg-2 col-md-2 col-sm-2">
								<input style="margin-left:-35px;" type="text" name="movieDirect" id="movieDirect" value="${movieDirect }" class="form-control" />
							</div>
							<label for="" class="col-lg-1 col-md-2 col-sm-2 control-label">电影类型:</label>
							<div class="col-lg-2 col-md-2 col-sm-2">
								<select class="select2_demo_1 form-control" name="movieTypeId"
								id="movieTypeId">
								<option value="">--请选择--</option>
								<c:forEach items="${tlist }" var="tlist">
									<option value="${tlist.movieTypeId }" ${movieTypeId==tlist.movieTypeId?'selected':'' }>${tlist.movieTypeName }</option>
								</c:forEach>
							</select>
						</div>
							
							<input style="width:82px;height:34px;" type="submit" value="搜索" class="col-lg-3 btn btn-success" />
							<button onclick="addMovie()" style="width:82px;height:34px;margin-left:15px;" type="button" class="col-lg-3 btn btn-success">添加</button>
						</div>
					</form>

					<!--表格部分-->
					<div class="ibox-content">
						<div class="row">
							<div class="col-sm-12">
								<table class="table table-striped table-bordered table-hover dataTables-example">
									<thead>
										<tr>
											<th>序号</th>
											<th>电影名称</th>
											<th>电影简介</th>
											<th>电影展示图</th>
											<th>导演</th>
											<th>所属类型</th>
											<th>上映时间</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<c:forEach items="${list }" var="list" varStatus="n">
										<tr>
											<td>${n.index+1 }</td>
											<td><a onclick="javascript:r_swiper2('${list.movieId}')"
												style="color: #0D8DDB !important;" href="javascript:void(0)">${list.movieName }</a>
											</td>
											<td>${fn:substring(list.movieSummary,0,30)}${fn:length(list.movieSummary)>30?'...':''}</td>
											<th>
												<div class="YLlightbox" style="text-align: center;">
													<a href="${list.picUrl }" rel="YLlightbox"><img
														src="${list.picUrl }"
														style="width: 25px; height: 25px;"></a>
												</div>
											</th>
											<td>${list.movieDirect }</td>
											<td>${list.movieTypeName }</td>
											<td><fmt:formatDate type="time"
												value="${list.releaseDate }"
												pattern="yyyy-MM-dd" /></td>
											<td><a onclick="r_swiper2(${list.movieId})"
												class="up btn btn-primary btn-xs"><i
													class="fa fa-pencil"></i>修改</a> 
													<a onclick="del(${list.movieId})"
														class="btn btn-warning btn-xs"><i class="fa fa-times"></i>删除</a>
											</td>
										</tr>
										</c:forEach>
									</tbody>
								</table>
							</div>
						</div>
						<div class="row">
							<form action="" id="for" name="for" method="post">
								<input type="hidden" name="yehao" id="yin" value="1"> <input
									type="hidden" name="pagesize" id="tiaoshu"
									value="${page.pageSize }">
								<div class="fy">
									<span style="float: left;">每页条数：</span> <select
										style="width: 70px; float: left;"
										onchange="changeItem(this.value)" id="pagesize"
										name="pageSize">
										<option value="10" ${page.pageSize==10?'selected':'' }>10</option>
										<option value="20" ${page.pageSize==20?'selected':'' }>20</option>
										<option value="50" ${page.pageSize==50?'selected':'' }>50</option>
										<option value="100" ${page.pageSize==100?'selected':'' }>100</option>
										<option value="200" ${page.pageSize==200?'selected':'' }>200</option>
									</select>
									<div style="height: 27px;" class="col-sm-7">
										<div class="dataTables_paginate paging_simple_numbers"
											id="editable_paginate">
											<ul class="pagination pull-right" style="margin: -3px 0;">
												<li class="paginate_button previous" id="editable_previous">
													<a href="javascript:han(${page.pageNow-1 })"
													aria-controls="editable" data-dt-idx="0" tabindex="0">上一页</a>
												</li>
												<li class="paginate_button previous" id="editable_previous">
													<a aria-controls="editable" style="border: 0"
													data-dt-idx="0" tabindex="1"><input type="text"
														id="current"
														style="width: 32px; height: 19px; text-align: center;"
														value="${page.totalPageCount==0?0:page.pageNow}" /> /
														${page.totalPageCount }</a>
												</li>
												<li class="paginate_button previous" id="editable_previous">
													<a href="javascript:han(${page.pageNow+1 })"
													aria-controls="editable" data-dt-idx="0" tabindex="5">下一页</a>
													<a href="javascript:han($('#current').val())"
													aria-controls="editable" data-dt-idx="0" tabindex="5">跳转</a>
												</li>
											</ul>
										</div>
									</div>
									<div style="float: right;">总共${page.totalCount }条</div>
								</div>

							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<iframe id="ifr" src="" frameborder="no" scrolling="no" width="780px"
		height="100%" allowtransparency="true"></iframe>
		<script src="/admin/public/jquery-1.11.3.js"></script>
		<script src="/admin/public/bootstrap.min.js" type="text/javascript"></script>
		<script src="/admin/js/plugins/lhgdialog/lhgdialog.js"></script>
		<script src="${request.getContextPath }/admin/My97/WdatePicker.js"></script>
		<!-- 弹出警示框 -->
		<script src="/admin/js/plugins/toastr/toastr.min.js"></script>
		<!-- 弹出确认框 -->
		<script src="/admin/public/artDialog4.1.7/artDialog.js?skin=blue"></script>
    	<script src="/admin/public/artDialog4.1.7/plugins/iframeTools.js"></script>
    	
    	<script src="/admin/js/templet_form.js"></script>
    	<script src="${request.getContext }/admin/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    	function changeNumber(num){
    		document.getElementById("yin").value=num;
    		var biao=document.getElementById("for");
    		biao.submit();
    	}
    	function changeItem(size) {
    		document.getElementById("tiaoshu").value=size;
    		var biao=document.getElementById("for");
    		biao.submit();
    	 }
    	function han(pn){
    		var yeshu=eval(${page.totalPageCount});
    		if(pn>0){
    			document.getElementById("yin").value=pn;
    		}else{
    			document.getElementById("yin").value=1;
    		}
    		if(document.getElementById("yin").value>yeshu){
    			document.getElementById("yin").value=yeshu;
    		}
    		var biao=document.getElementById("for");
    		document.for.action="/admin/movie/movieList?movieName="+document.all.movieName.value+"&movieDirect="+document.all.movieDirect.value+"&movieTypeId="+document.all.movieTypeId.value;
    		biao.submit();
    	}
    	//添加电影
    	function addMovie() {
			$.dialog({
				title : '添加电影信息',
				width : 700,
				height : 580,
				lock:true,
				content : 'url:/admin/movie/addMovie',
				init : function() {
				var iframe = this.iframe.contentWindow;
				var ul = iframe.document.getElementById('');
			},
			button : [
				{
					name : '保存',
					callback : function() {
					var iframe = this.iframe.contentWindow;
					var btn = iframe.document.getElementById('btnn').click();
					if (btn == true) {
					} else {
						if (iframe.document.getElementById('').value == 1) {
							window.location.href = "/admin/Member/addMe";
						}
						return false;
						}
						},
						focus : true

						}, {
						name : '取消',
						callback : function() {

						}
						} ]
			});
		}
    	//侧滑（修改电影信息）
	function r_swiper2(movieId) {
	 	var expanded = false;
	 	if(expanded) {
	 		$('#ifr').animate({
	 			right: '-780'
	 		}, 500);
	 	} else {
	 		$('#ifr').attr('src','/admin/movie/selectMovie?movieId='+movieId);
	 		$('#ifr').animate({
	 			right: '0px'
	 		}, 500);
	 		$("#ifr").contents().find(".form-close-icon").click(function() {
	 			$('#ifr').animate({
	 				right: '-780'
	 			}, 500);
	 		});
	 	}
	 	expanded = !expanded;
	 }
    	//删除电影信息
    	function del(movieId){
			window.wxc.xcConfirm("确定要删除吗？", window.wxc.xcConfirm.typeEnum.confirm,{onOk:function(){ 
	  			$.post("/admin/movie/delete",{"movieId":movieId},
	  			function(data){
	  				window.wxc.xcConfirm(data.msg, window.wxc.xcConfirm.typeEnum.info,
							{onOk:function(){window.location.href="/admin/movie/movieList";}}
					)
	  			});
	  		}})
		}
</script>
 <!-- 图片放大缩小 -->
	<script type="text/javascript">
		;(function($){
			$.fn.hoverDelay = function(options){
					var defaults = {
							hoverDuring: 200,
							outDuring: 200,
							hoverEvent: function(){
									$.noop();
							},
							outEvent: function(){
									$.noop();    
							}
					};
					var sets = $.extend(defaults,options || {});
					var hoverTimer, outTimer;
					return $(this).each(function(){
							$(this).hover(function(){
									clearTimeout(outTimer);
									hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
							},function(){
									clearTimeout(hoverTimer);
									outTimer = setTimeout(sets.outEvent, sets.outDuring);
							});    
					});
			}      
	})(jQuery);
		$(function(){
			/*1、图片显示与放大；2、图片拖动；3、翻页*/
			$('body').append('<div id="YLimgwrap"><div id="YLimgcon"><h4>鼠标滚动缩放图片<a class="YLt_close" title="关闭"></a><a class="YLt_size" title="原大小"></a></h4><img id="YLimg"><a class="prev" href="javascript:;"></a><a class="next" href="javascript:;"></a></div></div>');
			var base_w,base_h,a_flag_index;
			var imgSrcArray=[];		//当前YLlightbox下目标图片的地址集合
			
			//=======点击要放大的图片=======//
			$('.YLlightbox a[rel="YLlightbox"]').click(function(e){
					e.preventDefault();
					e.stopPropagation();
					//显示图片
					$('#YLimg').attr('src',$(this).attr('href')).css({'max-height':'500px','min-height':'200px'});
					$('#YLimgwrap').show();
					//获取图片尺寸
					var tranImg=new Image();
					tranImg.src=$('#YLimg').attr('src');
					base_w=tranImg.width;		//图片原始宽度
					base_h=tranImg.height;		//图片原始高度
					//定位
					var position_top=($(window).height() - $('#YLimg').height() - 45)/2;
					var position_left=($(window).width() - $('#YLimg').width() -20)/2;
					$('#YLimgcon').css({'top':position_top,'left':position_left});
					//赋值数组(图片地址)
					imgSrcArray=[];		//先清空
					var total_a=$(this).parents('.YLlightbox').find('a[rel="YLlightbox"]');
					console.log(total_a);
					for(var i=0; i<total_a.length; i++){		//开始赋值
							imgSrcArray[i]=total_a.eq(i).attr('href');
					}
					a_flag_index=$(this).index();
			});
			//=======原大小=======//
			/* $('#YLimgwrap .YLt_size').click(function(){
					$('#YLimg').width(base_w);		//重置宽高
					$('#YLimg').height(base_h);
					var position_top2=($(window).height() - base_h - 45)/2;
					var position_left2=($(window).width() - base_w -20)/2;
					$('#YLimg').css({'max-height':'','min-height':''});		//清除尺寸限制
					$('#YLimgcon').css({'top':position_top2,'left':position_left2});		//重定位
			}); */
			//=======关闭=======//
			$('#YLimgwrap .YLt_close').click(function(){
					$('#YLimg').attr('src','').width("").height("");		//清除属性
					$('#YLimgwrap').hide();
			});
			//=======移动=======//
			var dragToggle=false;
			var leftLength,topLength;
			$('#YLimgcon').mousedown(function(e){
					e.stopPropagation();
					e.preventDefault();
					leftLength=e.pageX - $(this).position().left;
					topLength=e.pageY - $(this).position().top;
					
					dragToggle=true;
			});
			$(document).mousemove(function(e){
					if(dragToggle)
					$('#YLimgcon').css({'left':e.pageX - leftLength,'top':e.pageY - topLength});
			}).mouseup(function(){
					dragToggle=false;
			});
			//=======鼠标滚动放大缩小图片=======//
			var p_left=$('#YLimgcon').css('left');
			var p_top=$('#YLimgcon').css('top');
			var scrollFunc = function(e){
					e = e || window.event;
					e.stopPropagation();
					if($('#YLimgwrap').css('display') == "block"){
							e.preventDefault();
					}
					var tran_w=$('#YLimg').width();
					var tran_h=$('#YLimg').height();
					if (e.wheelDelta) {		//判断浏览器IE，谷歌滑轮事件
							if (e.wheelDelta > 0) { //当滑轮向上滚动时
									$('#YLimg').width(tran_w * 1.1);
									$('#YLimg').height(tran_h * 1.1);
									$('#YLimg').css({'max-height':'','min-height':''});		//清除尺寸限制
							}
							if (e.wheelDelta < 0 && tran_h>50) { //当滑轮向下滚动时
									$('#YLimg').width(tran_w * 0.9);
									$('#YLimg').height(tran_h * 0.9);
									$('#YLimg').css({'max-height':'','min-height':''});		//清除尺寸限制
							}
					} else if (e.detail) {		//Firefox滑轮事件
							if (e.detail> 0 && tran_h>50) { //当滑轮向下滚动时
									$('#YLimg').width(tran_w * 0.9);
									$('#YLimg').height(tran_h * 0.9);
									$('#YLimg').css({'max-height':'','min-height':''});		//清除尺寸限制
							}
							if (e.detail< 0) { //当滑轮向上滚动时
									$('#YLimg').width(tran_w * 1.1);
									$('#YLimg').height(tran_h * 1.1);
									$('#YLimg').css({'max-height':'','min-height':''});		//清除尺寸限制
							}
					}
					var tran_position_top=($(window).height() - $('#YLimg').height() - 45)/2;
					var tran_position_left=($(window).width() - $('#YLimg').width() -20)/2;
					$('#YLimgcon').css({'top':tran_position_top,'left':tran_position_left});		//重定位
			}
			//给页面绑定滑轮滚动事件  
			if (document.addEventListener) {	//firefox
					document.addEventListener('DOMMouseScroll', scrollFunc, false);
			}  
			//滚动滑轮触发scrollFunc方法  //ie 谷歌  
			window.onmousewheel = document.onmousewheel = scrollFunc;
	});
		function seldetail(userId){
			//侧滑
			 	var expanded = false;
			 	if(expanded) {
			 		$('#ifr').animate({
			 			right: '-780'
			 		}, 500);
			 	} else {
			 		$('#ifr').attr('src','/admin/Member/findByid?userId='+userId);
			 		$('#ifr').animate({
			 			right: '0px'
			 		}, 500);
			 		$("#ifr").contents().find(".form-close-icon").click(function() {
			 			$('#ifr').animate({
			 				right: '-780'
			 			}, 500);
			 		});
			 	}
			 	expanded = !expanded;
			
		}
		
		
		</script>   	
</body>
</html>
